<template>
  <el-dialog title="修改头像" top="50px" width="1000px" :model-value="visible" @close="handleCancel" v-bind="$attrs">
    <ImageCropper :option="state.option"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button link @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import ImageCropper from '@/components/ImageCropper.vue'

const formRef = ref(null)

const props = defineProps({
  avatar: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:visible'])

const state = reactive({
  formData: {
    avatar: props.avatar,
  },
  rules: {
    
  },
  option: {
    img: props.avatar,
    autoCropWidth: 200,
    autoCropHeight: 200,
  }
})

const handleSendCode = (done) => {
  done(true)
}

const handleCancel = () => {
  emits('update:visible', false)
}

const handleConfirm = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      return 
    }
  })
}

watch(() => props.visible, (val) => {
  if (val) {
    if (formRef.value) {
      formRef.value.resetFields()
    }
  }
})

</script>